<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="s" uri="/struts-tags" %>
<link rel="stylesheet" media="screen" href="css/docs.css"/>
<link rel="stylesheet" media="screen" href="lib/jqplot/jquery.jqplot.min.css"/>
<!-- jQplot SETUP -->
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/jqplot/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="lib/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.barRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.pointLabels.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.donutRenderer.min.js"></script>
<script type="text/javascript" src="lib/jqplot/plugins/jqplot.bubbleRenderer.min.js"></script>
<link rel="stylesheet" media="screen" href="lib/datatables/css/vpad.css"/>
<script type="text/javascript" src="lib/datatables/js/jquery.dataTables.js"></script>


<script type="text/javascript">
    $(document).ready(function () {

    });

    function initChart(tickslabel, scores, labels){
        //var profits = [87.65, 98.40, 65.39, 93.20, 78.00, 67.98, 78.45, 89.56, 87.10, 69.56, 96.20, 100];
        //var varhg = [85.34, 78.67, 65.36, 89.45, 98.00, 76.48, 76.44, 79.46, 57.70, 59.56, 78.20, 58];
        //var tickslabel = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];
        var ylabel = ['Profits'];


        //line with some options
        //var chart2 = $.jqplot('chart2', [profits, varhg], {
        var chart2 = $.jqplot('chart2', scores, {
            title:'考核历史数据',
            legend:{
                show:true,
                //labels:['业绩达成率(万元)', '老客户下单率(万元)'],
                labels:labels,
                location:'ne'
            },
            axes:{
                xaxis:{
                    renderer:$.jqplot.CategoryAxisRenderer,
                    ticks:tickslabel
                },
                yaxis:{
                    tickOptions:{
                        formatString:'%.2f 分'
                    }
                }
            },
            highlighter:{
                show:true,
                sizeAdjust:7.5,
                tooltipAxes:'y'
            },
            cursor:{
                show:false
            }
        });
    }

</script>
<!-- jQplot SETUP END -->

<h1 class="page-title">数据输入</h1>

<form method="post" name="post_form" id="post_form">
<div class="container_12 clearfix">
    <section class="portlet grid_12 leading docs">
        <header>
            <h2>定量考核数据输入</h2>
        </header>
        <section>

            <DIV class="portlet">
                <header>
                    <h5_n>${work.baseId.name}</h5_n>
                    <h2><s:if test='%{#request.work.baseId.sex=="0"}'>先生</s:if><s:else>女士</s:else></h2>
                </header>
                <section class="clearfix">
                    <div class="grid_2 alpha" style=" text-align:center">
                        <img src="${work.baseId.facePath}" width="120" height="135"/>
                    </div>
                    <div class="grid_3">
                        <dl>
                            <dt>职务</dt>
                            <dd><h6>${work.duty.dutyName} </h6></dd>
                            <dt>员工号</dt>
                            <dd><h6>${work.workNo}</h6></dd>
                            <dt>职等</dt>
                            <dd><h6>${work.grade.gradeName}</h6></dd>
                        </dl>
                    </div>

                    <div class="grid_3 omega">
                        <dl>
                            <dt>部门</dt>
                            <dd><h6>${work.organization.fullName}</h6></dd>
                            <dt>工龄</dt>
                            <dd><h6>${work.workAge}</h6></dd>
                            <dt>考核记录</dt>
                            <dd><h6 id="prev_score">92分</h6>
                                <select id="form-timezone" style="opacity: 0;" onchange="getChartDatas($(this).val())">
                                    <option value="1">显示本年度</option>
                                    <option value="2">显示上年度</option>
                                    <option value="3">显示全部</option>
                                </select>
                            </dd>
                        </dl>
                    </div>
                </section>
            </DIV>

            <div class="leading">
                <div class="jqPlot" id="chart2" style="width:100%;height:200px;"></div>
            </div>

            <div class="leading">
                <table class="display" id="example">
                    <thead>
                    <tr>
                        <s:if test="#request.status!=null and #request.status.toString() == 'wait_audit'">
                        <th>操作</th>
                        </s:if>
                        <th><strong>考核项目</strong></th>
                        <th>占比</th>
                        <th><strong>打分说明</strong></th>
                        <th>考核周期</th>
                        <th>量化数字</th>
                        <th style="min-width:60px">打分</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 修改列表 -->
                    <s:if test="#request.edit == true or #request.opType!=null">
                        <s:if test="#request.examQuanScoreDetails==null || #request.examQuanScoreDetails.size<=0">
                            <tr class="gradeX">
                                <td colspan="6">暂无考核项目2</td>
                            </tr>
                        </s:if>
                        <s:else>
                            <s:iterator value="#request.examQuanScoreDetails" var="item" status="sta">
                                <s:if test="#sta.even"> <tr class="gradeA"> </s:if><s:else><tr class="gradeC"></s:else>
                                <s:if test="#request.status!=null and #request.status.toString() == 'wait_audit'">
                                <td><input type="radio" name="select_detail" value="${item.id}" onclick="findAuditHistory('${item.id}')"/></td>
                                </s:if>
                                <td>${item.examQuanItemSet.title}</td>
                                <td>${item.examQuanItemSet.percentage}</td>
                                <td>${item.examQuanItemSet.remark}</td>
                                <td>${item.examQuanItemSet.periodType.name}</td>
                                <td>
                                    <input type="hidden" name="item_id" value="${item.id}"/>
                                    <input type="hidden" name="quan_item_id" value="${item.examQuanItemSet.id}"/>
                                    <s:if test="#request.opType != 'audit' and (#request.item.status.toString() == 'wait_submit' or (#request.item.status.toString() == 'wait_audit' and #request.item.rejectTimes > 0))">
                                        <input type="text" name="numeral" id="numeral_${item.id}" style=" width:70px" onblur="check_numeral(this)" value="${item.numeral}"/>
                                    </s:if>
                                    <s:else>
                                        <input type="text" name="numeral" id="numeral_${item.id}" style=" width:70px" onblur="check_numeral(this)" value="${item.numeral}" disabled="disabled"/>
                                    </s:else>

                                </td>
                                <td>
                                    <s:if test="#request.opType != 'audit' and (#request.item.status.toString() == 'wait_submit' or (#request.item.status.toString() == 'wait_audit' and #request.item.rejectTimes > 0))">
                                        <input type="text" name="score" id="score_${item.id}" style=" width:70px" onblur="check_score(this)" value="${item.score}"/>
                                    </s:if>
                                    <s:else>
                                        <input type="text" name="score" id="score_${item.id}" style=" width:70px" onblur="check_score(this)" value="${item.score}" disabled="disabled"/>
                                    </s:else>
                                </td>
                                </tr>
                            </s:iterator>
                        </s:else>
                    </s:if>
                    <!-- 添加列表 -->
                    <s:else>
                        <s:if test="#request.examQuanItemSets==null || #request.examQuanItemSets.size<=0">
                            <tr class="gradeX">
                                <td colspan="6">暂无考核项目3</td>
                            </tr>
                        </s:if>
                        <s:else>
                            <s:iterator value="#request.examQuanItemSets" var="item" status="sta">
                                <s:if test="#sta.even"> <tr class="gradeA"> </s:if><s:else><tr class="gradeC"></s:else>
                                <td>${item.title}</td>
                                <td>${item.percentage}</td>
                                <td>${item.remark}</td>
                                <td>${item.periodType.name}</td>
                                <td>
                                    <input type="hidden" name="item_id" value="${item.id}"/>
                                    <input type="hidden" name="quan_item_id" value="${item.id}"/>
                                    <input type="text" name="numeral" id="numeral_${item.id}" style=" width:70px" onblur="check_numeral(this)"/>
                                </td>
                                <td>
                                    <input type="text" name="score" id="score_${item.id}" style=" width:70px" onblur="check_score(this)"/>
                                </td>
                                </tr>
                            </s:iterator>
                        </s:else>
                    </s:else>
                    </tbody>
                </table>
            </div>
            <div class="clear"></div>
            <div class="grid_12">

                <s:if test="#request.edit == true or #request.edit == false">
                <div class="form-action clearfix">
                    <p>
                        <a class="button" href="javascript:void(0)" onclick="checkForm()">
                            <span style="background:url(${ctx}/images/img/accept.png)" class="icon">&nbsp;</span>确认</a>

                        <a href="javascript:void(0)" onclick="javascript:window.location.href='#exam/quan_input_main.xhtml?examPeriodStr=${examPeriodStr}&examPeriodEnum=${examPeriodEnum}'" class="button">
                            <span class="icon" style="background:url(${ctx}/images/img/arrow_undo.png)">&nbsp;</span>返回</a>
                    </p>
                </div>
                </s:if>
            </div>
            <h4>&nbsp;</h4>
        </section>
    </section>
</div>

<input name="examPeriodStr" value="${examPeriodStr}" type="hidden"/>
<input name="examPeriodEnum" value="${examPeriodEnum}" type="hidden"/>
<input name="work.id" value="${work.id}" type="hidden"/>
<input name="duty_id" value="${work.duty.id}" type="hidden"/>
<input name="edit" value="${edit}" type="hidden"/>

</form>

<script type="text/javascript" src="${ctx}/js/global_util.js"></script>
<script type="text/javascript">
    function check_numeral(obj){
        var p = $(obj).attr("value");
        if(isNaN(p)){
            alert("请正确填写量化数字");
            $(obj).attr("value", "");
            return;
        }
    }
    function check_score(obj){
        var p = $(obj).attr("value");
        if(isNaN(p)){
            alert("请正确填写分数");
            $(obj).attr("value", "");
            return;
        }
        if(p > 100 || p < 0){
            alert("请输入0~100之间的数")
            $(obj).attr("value", "");
            return;
        }
    }

    function checkForm(){
        var flag = false;
        $("input[type='text'][name='numeral']").each(function(){
            var num = $(this).val();
            if(checkNull(num) || isNaN(num)){
                alert("量化数字输入不正确或不完整")
                flag = true;
                return false;
            }
        });
        if(flag){
            return;
        }
        $("input[type='text'][name='score']").each(function(){
            var sco = $(this).val();
            if(checkNull(sco) || isNaN(sco)){
                alert("分数输入不正确或不完整")
                flag = true;
                return false;
            }
        });
        if(flag){
            return;
        }

        var url="${ctx}/exam/quan_data_input_create.xhtml";
        $.ajax(url, {
            type:"POST",
            data:$("#post_form").serialize(),
            dataType:"html",
            cache:false,
            success:function(a) {
                return pageDownloaded(a, url)
            },
            complete:function(b) {
            }
        });
    }

    $(function(){
        getChartDatas(1);
    });
    function getChartDatas(yearType){
        var itemIds = new Array();
        $("input[type='hidden'][name='quan_item_id']").each(function(){
            itemIds.push($(this).val());
        });
        if(itemIds.length == 0){
            return;
        }

        var year = new Date().getFullYear();
        if(yearType == 2){
            year = year-1;
        }

        $.ajax({
            type:"post",
            url:"/ajax/quan_chart_item_history.xhtml",
            //data: "name=John&location=Boston",
            data: {"itemIds":itemIds.join(","), "year":year, "work_id":"${work.id}"},
            dataType:"json",
            success:function (datas) {
                $("#chart2").html("");
                if(datas != null && datas.length > 0){
                    var itemNames = datas[0];
                    var periodNames = datas[1];
                    var scores = datas[2]
                    //alert(itemNames)
                    //alert(periodNames)
                    //alert(scores)
                    initChart(periodNames, scores, itemNames);
                }
            }
        });
    }

    $(function(){
       getPrevScore();
    });
    function getPrevScore(){
        $.ajax({
            type:"post",
            url:"/ajax/exam_prev_score.xhtml",
            data: {"work.id":"${work.id}", "examPeriodEnum":"${examPeriodEnum}"},
            dataType:"json",
            success:function (score) {
                //alert(score)
                $("#prev_score").html(score);
            }
        });
    }
</script>